<template>
  <div class="mine">
    <van-tabs v-model="active" color="#FDC12C" :line-height="height" title-active-color="#FDC12C" swipeable
              @change="tabChange(active)" :lazy-render="false">
      <div class="line"></div>

      <div class="selectTabs" v-if="active === 1">
        <div @click="showActionsheet(1)"><span>{{sortFilter1.name}}</span><img src="@/assets/images/ic_down.png" alt="">
        </div>
        <div @click="showActionsheet(2)"><span>{{sortFilter2.name}}</span><img src="@/assets/images/ic_down.png" alt="">
        </div>
        <div @click="showActionsheet(3)"><span>{{sortFilter3.name}}</span><img src="@/assets/images/ic_down.png" alt="">
        </div>
      </div>
      <div class="tabMain" id="tabMain" :style="{'top':active === 1?'1.8rem':'1rem'}">
        <van-tab :title="item.name" v-for="(item,index) in form.status_list" :key="index">
          <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false"  @bottom-status-change="handleBottomChange "@top-status-change="handleTopChange"
                       :bottom-all-loaded="allLoaded" ref="loadmore">
            <dw-mine-li ref="mineLi" :form="listForm"></dw-mine-li>
            <div class="loadShow" v-show="allLoaded">暂无更多！</div>
            <div slot="bottom" class="mint-loadmore-bottom" v-show="!allLoaded&&topStatus!=='loading'">
              <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">上拉加载</span>
              <span v-show="bottomStatus === 'loading'">加载中</span>
            </div>
          </mt-loadmore>
        </van-tab>
      </div>
    </van-tabs>

    <van-popup v-model="show1" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        :title="sortFilter1.name"
        value-key="name"
        :columns="form.sort_type1"
        @cancel="onCancel"
        @confirm="onConfirm1"
      />
    </van-popup>
    <van-popup v-model="show2" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        :title="sortFilter2.name"
        value-key="name"
        :columns="form.sort_type2"
        @cancel="onCancel"
        @confirm="onConfirm2"
      />
    </van-popup>
    <van-popup v-model="show3" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        :title="sortFilter3.name"
        value-key="name"
        :columns="form.sort_type3"
        @cancel="onCancel"
        @confirm="onConfirm3"
      />
    </van-popup>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/8 0008 17:01.
   */
  import {Dialog} from 'vant';
  import {Indicator, Loadmore} from 'mint-ui';
  import utils from '@/lib/StringExtend'
  import dwMineLi from './mineLi.vue'

  export default {
    mounted() {
      this.loadData();
    },
    components: {
      dwMineLi
    },
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        show1: false,//上拉菜单
        show2: false,//上拉菜单
        show3: false,//上拉菜单
        sortFilter1: {
          name: undefined,
          reward_sort: undefined,
        },
        sortFilter2: {
          name: undefined,
          difficulty_sort: undefined,
        },
        sortFilter3: {
          name: undefined,
          time_sort: undefined,
        },
        active: 0,
        height: 2,
        form: {},
        filters: {
          page_index: 1,
          page_count: 7,
          status: 0,
          reward_sort: 1,
          difficulty_sort: 1,
          time_sort: 1,
        },
        listForm: [],
        allLoaded: false,
        bottomStatus:'',
        topStatus:''
      }
    },
    computed: {},
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      /*
      * 上拉加载
      * */
      loadBottom() {
        this.filters.page_index++;
        this.handleBottomChange("loading");//上拉时 改变状态码
        this.myTaskList();
      },
      /*
      * 下拉刷新
      * */
      loadTop() {
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.listForm = [];
        this.allLoaded = false;
        this.myTaskList();
      },
      // 顶部状态+筛选条件
      loadData() {
        Indicator.open('加载中...');
        this.$axios.myTaskFilter().then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.form = res.data;
          this.sortFilter1 = res.data.sort_type1[0];
          this.sortFilter2 = res.data.sort_type2[0];
          this.sortFilter3 = res.data.sort_type3[0];
          this.filters.status = res.data.status_list[0].status;
          this.filters.reward_sort = this.sortFilter1.reward_sort;
          this.filters.difficulty_sort = this.sortFilter2.difficulty_sort;
          this.filters.time_sort = this.sortFilter3.time_sort;
          this.myTaskList();
        })
      },
      onConfirm1(value, index) {
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.listForm = [];
        this.allLoaded = false;
        this.sortFilter1 = value;
        this.filters.reward_sort = this.sortFilter1.reward_sort;
        this.show1 = false;
        this.myTaskList();
      },
      onConfirm2(value, index) {
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.listForm = [];
        this.allLoaded = false;
        this.sortFilter2 = value;
        this.filters.difficulty_sort = this.sortFilter2.difficulty_sort;
        this.show2 = false;
        this.myTaskList();
      },
      onConfirm3(value, index) {
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.listForm = [];
        this.allLoaded = false;
        this.sortFilter3 = value;
        this.filters.time_sort = this.sortFilter3.time_sort;
        this.show3 = false;
        this.myTaskList();
      },
      onCancel() {
        this.show1 = false;
        this.show2 = false;
        this.show3 = false;
      },
      showActionsheet(index) {
        switch (index) {
          case 1:
            this.show1 = true;
            break;
          case 2:
            this.show2 = true;
            break;
          case 3:
            this.show3 = true;
            break;
        }
      },
      // 列表
      myTaskList() {
        let params = Object.assign({
          open_id: utils.getCookie('open_id_' + this.wechatId)
        }, this.filters);
        Indicator.open('加载中...');
        this.$axios.myTask(params).then(res => {
          Indicator.close();
          this.$refs.loadmore[this.active].onTopLoaded();
          this.$refs.loadmore[this.active].onBottomLoaded();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          res.data.forEach(item => {
            this.listForm.push(item);
          });
          this.$nextTick(() => {
            if (this.filters.page_index === 1)
            document.getElementById('tabMain').scrollTop = 0
          });
          if (res.data.length < this.filters.page_count) {
            this.allLoaded = true;// 若数据已全部获取完毕
          }
        })
      },
      // 选项卡
      tabChange(e) {
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.listForm = [];
        this.allLoaded = false;
        this.filters.status = e;
        this.myTaskList();
      },

    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .mine {
    width: 100%;
    height: 100%;
    .van-tabs__content,van-tabs, .van-tabs--line{
      height: 100%;
    }
    .van-popup {
      border-radius: 0;
    }

    .line {
      width: 100%;
      height: 0.12rem;
      background: #FAFAFA;
    }

    .selectTabs {
      width: 100%;
      height: 0.8rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.33rem;
      box-sizing: border-box;
      color: #333333;
      font-size: 0.26rem;

      div {
        display: flex;
        align-items: center;
      }

      img {
        width: 0.17rem;
        height: 0.1rem;
        margin-left: 0.2rem;
      }
    }

    .tabMain {
      position: absolute;
      top: 1.8rem;
      bottom: 1rem;
      left: 0;
      right: 0;
      overflow: auto;
    }
  }
</style>
